<template>
  <div>
    <div class="top">
      <div class="header">
        <van-nav-bar title="服务商码" left-arrow @click-left="onClickLeft" />
      </div>
    </div>
    <div class="tab" v-for="(item,index) in facilitatorCode" :key="index">
      <div class="div" v-if="item.code_status==1">
        <img :src="item.avatar" class="img" />
        <div class="center">
          <span class="name">{{item.username}}</span>
          <span class="time">服务商码：{{item.vip_code_change}}</span>
        </div>
        <div class="right">
          <div class="right-top">
            <img src="../assets/images/fuwushang@3x.png" />
            <span>{{item.mobile_change}}</span>
          </div>
          <span class="add">{{item.code_time_end}}</span>
        </div>
      </div>
      <div class="div" v-if="item.code_status==0">
        <img src="../assets/images/fuwushang@3x.png" class="div-img" v-if="fuwushangShow" />
        <img src="../assets/images/huiyuan.png" class="div-img" v-if="huiyuanShow" />
        <div class="center">
          <span class="name" v-if="item.open!=1">服务商码：**** **** **** ****</span>
           <span class="name" v-if="item.open==1">服务商码：{{item.vip_code}}</span>
          <span class="time">有效期：{{item.code_time_end}}</span>
        </div>
        <div class="div-right">
          <van-button round @click="butClick(item.id)" v-if="item.open==0">{{butText}}</van-button>
          <van-button round :class="{used:item.open!=0}" v-else>{{butText}}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "fuwushangma",
  data() {
    return {
      uid: "",
      facilitatorCode: [],
      fuwushangShow: false,
      huiyuanShow: false,
      butText:"",
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.uid) {
      this.uid = this.$route.query.uid;
    }
    this.getFacilitatorCode();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async getFacilitatorCode() {
      //
      let params = {
        token: this.$cookies.get("token"),
        page: ""
      };
      const res = await this.$axios.post(this.$api.getFacilitatorCode, params);
      if (res.code == 1) {
        this.facilitatorCode = res.data;
        this.facilitatorCode.forEach((item,index) =>{
         if (item.code_type==1) {
             this.huiyuanShow = true;
         } else {
             this.fuwushangShow =true;
         };
         if (item.open !== 2) {
             this.butText = "使用"
         } else {
             this.butText ="失效"
         }
        });
      } else {

        this.$toast("获取服务商码失败" + res.msg);
      }
    },
    butClick (id) {
      this.openVipCode(id);
    },
   async openVipCode(id){
       let params = {
           token:this.$cookies.get("token"),
           id:id
       };
       const res = await this.$axios.post(this.$api.openVipCode, params)
       if(res.code ==1){
           this.getFacilitatorCode();
       }
   }
  }
};
</script>

<style scoped>
</style>

<style scoped>
.header >>> .van-nav-bar .van-icon {
  color: #fff;
}
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.van-nav-bar {
  background-color: #75c2f1;
  border: none;
}
.van-nav-bar__title {
  color: white !important;
}
.van-nav-bar__text {
  color: white !important;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
.top {
  height: 0.45rem;
}
.top-content {
  height: 2.7rem;
  /* height: 77.55%; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 8%;
  padding-right: 7%;
  align-items: center;
}
.content {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: white;
}
.money {
  font-size: 0.18rem;
  font-family: PingFangSC;
  font-weight: 400;
}
.yuan {
  font-size: 0.1rem;
  font-family: PingFangSC;
  font-weight: 400;
}
.tab >>> .van-tabs__line {
  background-color: white;
}
.tab >>> .van-tab--active {
  color: #00c6d8;
}
.tab >>> .van-tab {
  font-size: 0.16rem;
  font-family: PingFangSC;
  font-weight: 400;
}
.div {
  width: 90%;
  height: 0.6rem;
  background: white;
  margin-left: 5%;
  display: flex;
  margin-top: 0.09rem;
  margin-bottom: 0.09rem;
  border-radius: 0.05rem;
  box-shadow: 0px 0.02rem 0.08rem 0px rgba(70, 70, 70, 0.2);
}
.img {
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 3%;
  display: flex;
  justify-content: center;
  margin-top: 2.5%;
  border-radius: 50%;
}
.div-img {
  width: 0.2rem;
  height: 0.2rem;
  margin-left: 3%;
  display: flex;
  justify-content: center;
  margin-top: 2.5%;
}
.center {
  width: 80%;
  padding-left: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.name {
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(52, 52, 52, 1);
}
.time {
  font-size: 0.12rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(139, 139, 139, 1);
  /* padding-top: 5%; */
  padding-top: 3%;
}
.right {
  width: 30%;
  display: flex;
  flex-direction: column;
  text-align: right;
  padding-right: 3%;
}
.right-top {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 0.1rem;
  margin-bottom: 6%;
}
.right-top img {
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 5%;
}
.right-top span {
  font-size: 0.12rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(139, 139, 139, 1);
  /* line-height:.24rem; */
}
.add {
  font-size: 0.12rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #8b8b8b;
  line-height: 0.2rem;
}
.div-right {
  /* width: 30%; */
  width: 25%;
  display: flex;
  flex-direction: column;
  text-align: right;
  /* padding-left: 3%; */
}
.div-right >>> .van-button__text {
  color: white;
  text-align: center;
  margin-top: -0.08rem;
  padding-left: 0.13rem;
}
.div-right >>> .van-button {
  background: linear-gradient(
    0deg,
    rgba(1, 190, 208, 1) 0%,
    rgba(124, 193, 241, 1) 100%
  );
  width: 0.66rem;
  height: 0.28rem;
  margin-top: 20%;
  display: flex;
  padding-left: 5%;
}
.div-right >>> .used {
  background: #bfbfbf;
}
</style>





